<template>
  <div class="rank">
    <div class="content">
      <div class="title-line">
        <span class="title">排行榜</span>
        <div class="title-line-right">
          <!-- <img src="@/assets/image/rank-icon.png" alt="" class="rank-icon"/> -->
          <span>按播放量排序</span>
          <img src="@/assets/image/rank-down.png" alt="" class="down"/>
        </div>
      </div>
      <div class="table-header">
        <div class="header1">排名</div>
        <div class="header2">
          <div style="width: 100%; text-align: center">用户</div>
        </div>
        <div class="header3">
          <div style="width: 100%; text-align: center">发布量</div>
        </div>
        <div class="header4">
          <div style="width: 100%; text-align: center">总浏览量</div>
        </div>
      </div>
      <div v-if="list.length" class="table-data-wrapper">
        <div class="table-data" v-for="(item, index) in list" :key="index">
          <div class="header1">
            <span :class="index > 2 ? 'yellow' : 'red'">{{ index + 1 }}</span>
          </div>
          <div class="header2">
            <img :src="item.head_image" alt="" class="avatar" v-if="item.head_image"/>
            <img src="@/assets/image/default-avatar.jpeg" alt="" class="avatar" v-else/>

            <span class="user-name">{{ item.username }}</span>
          </div>
          <div class="header3">{{ item.sum_push }}</div>
          <div class="header4">{{ item.sum_view }}</div>
        </div>
      </div>
      <div v-else class="no-data">
        <span>暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankList } from '@/api/account'
import { getOssDomain } from '@/api/oss'

export default {
  data () {
    return {
      current_page: 1,
      page_size: 20,
      order_by: 'desc', // 排序方式   "SUM_PUSH" 发布数   "SUM_VIEW"  浏览数
      list: [],
      oss_domain: '',
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getList()
    document.title = '排行榜'
  },
  methods: {
    getList () {
      const merchant_id = sessionStorage.getItem('account_id')
      const { current_page, page_size, order_by  } = this
      getRankList({
        merchant_id,order_by,
        current_page, page_size,
      }).then(res => {
        res.forEach(item => {
          if (item.head_image) item.head_image = `${this.oss_domain}/${item.head_image}`
        })
        console.log('rank list:', res)
        this.list = res
      })
    }
  }
}
</script>

<style scoped>
.table-data-wrapper {
  flex: 1;
}
.no-data {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.red {
  color: #FF5544;
}
.yellow {
  color: #FF8819;
}
.table-data {
  display: flex;
  height: 13.87vw;
  align-items: center;
}
.avatar {
  margin-right: 2.13vw;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
}
.user-name {
  width: 21.33vw;
  text-align: left;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0px;

  color: #333333;
}
.header1 {
  width: 17.07vw;
  font-weight: 600;
}
.header2 {
  flex: 1;
  display: flex;
  align-items: center;
}
.header3 {
  width: 19.07vw;
}
.header4 {
  width: 28.07vw;
}
.table-data .header3, .table-data .header4 {
  color: #666;
}
.table-header {
  display: flex;
  width: 86.93vw;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: #F8F8FA;
  margin: 0 auto;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 500;
  color: #999999;
}
.table-header .header3 {
  width: 10vw;
}
.table-header .header4 {
  width: 26vw;
}
.table-header > div {
  text-align: center;
}
.table-data > div {
  text-align: center;
}
.rank {
  padding-top: 5.33vw;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 5.33vw);
  width: 89.6vw;
  margin: 0 auto;
  background: #fff;
  padding-top: 3.2vw;
  box-sizing: border-box;
  border-radius: 2.13vw;
}
.title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 3.2vw 0 2.67vw;
  margin-bottom: 4.27vw;
}
.title-line-right {
  display: flex;
  height: 4.27vw;
  align-items: center;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #006FDE;
}
.title {
  font-family: Source Sans Pro;
  font-size: 4.8vw;
  font-weight: bold;
  color: #333333;
}
.rank-icon, .down {
  width: 4.27vw;
  height: 4.27vw;
}
</style>